<template>
  <div class="home">
    <HomeNavBar></HomeNavBar>
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="" />
    </div>
    <home-search-box></home-search-box>
    <home-categories></home-categories>
    <div class="search" v-if="isShowSearch">搜索框</div>
    <home-content></home-content>
  </div>
</template>

<script setup>
import HomeNavBar from "./cpns/home-nav-bar.vue";
import homeSearchBox from "./cpns/home-search-box.vue";
import homeCategories from "./cpns/home-categories.vue";
import homeContent from "./cpns/home-content.vue";
import { useScroll } from "@/utils/useScroll";
import { ref, watch, computed } from "vue";
const { scrollTop } = useScroll();
/* 显示隐藏搜索框 */
const isShowSearch = computed(() => {
  if (scrollTop.value >= 500) {
    return true;
  } else {
    return false;
  }
});
</script>

<style lang="less" scoped>
.home {
  .banner {
    img {
      width: 100%;
    }
  }
}
</style>
